<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>下拉菜单</title>
    <style type="text/css">
        *{
			margin:0;
			padding:0;
			list-style:none;
			
		}
        .navBox{
			width:100%;
			height:50px;
		}
		.p_head{
			float:right;
			height:30px;
		}
		.cp{
			background:blue;
		}
		li{
			float:left;
			word-spacing:18px;
			width:65px;
			text-align:center;
		}
		
		
        a:hover{
			background:white;
		}
		ul ul{
			display:none;
		}
		
    </style>
</head>
<body>
    <div class="navBox" >
		 <div class="p_head">
		  <ul>
			<li><a href="http://news.baidu.com/" id="xwtr">新闻</a></li>
            <li><a href="https://www.hao123.com/" id="htr"> hao123</a> </li>
            <li><a href="https://map.baidu.com/" id="dttr">地图</a> </li>
            <li><a href="http://v.baidu.com/" id="sptr">视频 </a> </li>
			<li><a href="https://tieba.baidu.com/index.html" id="tbtr">贴吧</a> </li>
            <li><a href="http://xueshu.baidu.com/" id="xstr">学术</a> </li>
            <li><a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5" id="dltr">登录 </a> 
            <li id="gd" onmouseover="display(this)" onmouseout="hide(this)" >
                <a href="javascript:;" class="cp" >更多产品</a>
                <ul > 
					<li><img src="picture.png"/><br/><a id="nuomi" href="http://www.nuomi.com/?cid=002540" name="nuomi"><span class="nuomi">糯米</span></a></li>
					<li><img src="picture.png"/><br/><a id="yinyue" href="http://music.taihe.com" name="yinyue"><span class="yinyue">音乐</span></a></li>
					<li><img src="picture.png"/><br/><a id="tupian" href="http://image.baidu.com" name="tupian"><span class="tupian">图片</span></a></li>
					<li><img src="picture.png"/><br/><a id="zhidao" href="http://zhidao.baidu.com" name="zhidao"><span class="zhidao">知道</span></a></li>
					<li><img src="picture.png"/><br/><a id="wenku" href="http://wenku.baidu.com" name="wenku"><span class="wenku">文库</span></a></li>
					<li><img src="picture.png"/><br/><a id="fyb" href="http://top.baidu.com" name="fyb"><span class="fyb">风云榜</span></a></li>
					<li><a id="qbcp" href="//www.baidu.com/more/" name="qbcp"><span class="qbcp">全部产品</span></a></li>	
                </ul>
            </li>
		  </ul>
		</div>
	</div>
	
	
	<script> 
  function display(li){
		var listtr1=li.getElementsByTagName("ul")[0];
		listtr1.style.display='block';
	}  
	function hide(li){
		var listtr1=li.getElementsByTagName("ul")[0];
		listtr1.style.display='none';
	}
	
	</script>
</body>
</html>
 